<template>
	<view class="page">
		<view class="form">
			<u-navbar :is-back="true" :custom-back="goBack" title="编辑" back-text="">
			</u-navbar>
			<u-form :model="form" ref="uForm">
				<view class="form-content">
					<u-form-item class="item-height" prop="sex" label-width="5rem" style="padding: 0;" label="分润类型">
						<u-input v-model="form.typeValue" :disabled='true' placeholder="标准分润" />
						<u-icon @click="typeShowM" name="arrow-down" class="arrow-down" color="#ccc"></u-icon>
						<u-icon name="question-circle" color="#ccc" size="1rem" @click="open"></u-icon>
						<u-modal v-model="show" :content="content"></u-modal>
					</u-form-item>

					<u-form-item v-if="form.typeValue == '分段分润'" label="收费时长" label-width="5rem">
						<u-input v-model="form.priceTimeLong" type="number" placeholder="默认24小时" />
					</u-form-item>
					<u-form-item label="计费方式" label-width="5rem">
						<u-radio-group v-model="form.priceType">
							<u-radio v-for="(item, index) in priceTypeList" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item label="计费单位" label-width="5rem">
						<u-input v-model="form.price" type="number" placeholder="不得少于1" />
						<text>元/半小时</text>
					</u-form-item>
					<u-form-item label="计费封顶" label-width="5rem">
						<u-input v-model="form.dayMax" type="number" placeholder="不得少于2" />
						<text>元/天</text>
					</u-form-item>
					<u-form-item label="免费时长" label-width="5rem">
						<u-radio-group v-model="form.freeTime">
							<u-radio v-for="(item, index) in timeList" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="设备备注" label-width="5rem">
						<u-input v-model="form.remark" placeholder="输入备注" />
					</u-form-item>
					<u-form-item label="虚拟码位置" label-width="5rem">
						<u-input v-model="form.place" placeholder="输入虚拟码位置" />
					</u-form-item>

					<u-form-item class="item-height picker" prop="sex" label-width="5rem" style="padding: 0;" label="木柜大小">
						<u-input v-model="form.locationLine" :disabled='true' placeholder="行" />
						<u-icon name="arrow-down-fill" @click="numberShowM('row')" class="icon"></u-icon>
						<u-input v-model="form.locationColumn" :disabled='true' placeholder="列" />
						<u-icon name="arrow-down-fill" @click="numberShowM('column')" class="Ticon"></u-icon>
					</u-form-item>
					</u-form-item>
				</view>

				<u-select v-model="numberShow" :title="numberTitle" mode="mutil-column" :list="numberList" @confirm="numberClick"></u-select>
				<u-select v-model="typeShow" title="分润类型" mode="mutil-column" :list="typeList" @confirm="typeClick"></u-select>

				<view class="button">
					<u-button type="success" style="border-radius: 0;" @click="compile">确认</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script lang="js">
	import uniCard from '@/components/uni-card/uni-card.vue';
	import { updatePrice } from "../../../utils/uniApi";
	export default {
		components: {
			uniCard
		},
		data() {
			return {
				show: false,
				content: '分段分润规则：此订单24小时内费用金额根据设定商家收益时长进行结算至商家；开启分段分润，建议关闭商家查看订单详情；【逾期/购买订单不参数计费方式】',
				virtualSN: '', //虚拟码
				typeShow: false, //分润类型弹窗显示参数
				typeList: [
					[{
						value: 'NORMAL',
						label: '标准分润'
					}, {
						value: 'DAYPARTING',
						label: '分段分润'
					}, {
						value: 'INCREMENTAL',
						label: '递增计费'
					}]
				],
				typeValueCode: '',
				numberShow: false, //行列 弹窗显示参数
				numberTitle: '', //行列 弹窗的title
				numberList: [
					[{
						value: '1',
						label: '1'
					}, {
						value: '2',
						label: '2'
					}, {
						value: '3',
						label: '3'
					}, {
						value: '4',
						label: '4'
					}, {
						value: '5',
						label: '5'
					}]
				],
				form: {
					typeValue: '', //分润方式选择值
					priceTimeLong: '', //分段分润商家收费时长（分润方式为分段分润时显示  默认值24小时）
					priceType: '', //计费方式
					price: '', //计费单价
					dayMax: '', //计费上限
					freeTime: '', //免费时长 方式
					remark: '', //备注
					place: '', //位置
					locationLine: '', // 木柜大小，行
					locationColumn: '', //  木柜大小，列
				},
				priceTypeList: [{
						name: '半小时',
						disabled: false
					},
					{
						name: '一小时',
						disabled: false
					}
				],
				timeList: [{
						name: '5分钟',
						disabled: false
					},
					{
						name: '半小时',
						disabled: false
					}
				],

			};
		},
		methods: {
			onLoad(option) {
				if (option.virtual) {
					var dic = JSON.parse(option.virtual)
					// console.log('++++修改计费方式输出接受的参数：' + JSON.stringify(dic))
					this.virtualSN = dic.virtual
					if (dic.isEdit) {
						this.typeValueCode = this.virtualSN.brokerageType
						this.typeList[0].filter((item, index) => {
							if (item.value == this.typeValueCode) {
								this.form.typeValue = item.label //分润方式选择值
							}
						})
						this.form.priceTimeLong = this.virtualSN.dayPartingHours, //分段分润商家收费时长（分润方式为分段分润时显示  默认值24小时）
							this.form.priceType = this.virtualSN.deviceMoneyCalType == 'HALF_HOUR' ? '半小时' : '一小时', //计费方式
							this.form.price = this.virtualSN.price, //计费单价
							this.form.dayMax = this.virtualSN.dayMax, //计费上限
							this.form.freeTime = this.virtualSN.freeTimeType == 'SYSTEM_TYPE' ? '5分钟' : '半小时', //免费时长 方式
							this.form.remark = this.virtualSN.remark, //备注
							this.form.place = this.virtualSN.deviceLocation, //位置
							this.form.locationLine = this.virtualSN.locationLine,
							this.form.locationColumn = this.virtualSN.locationColumn
					}
				}
			},
			//分润类型 选择弹窗
			typeShowM(e) {
				this.typeShow = !this.typeShow;
				this.form.priceTimeLong = ''
			},
			typeClick(e) {
				this.form.typeValue = e[0].label
				this.typeValueCode = e[0].value
			},
			//木柜大小  行和列 选择弹窗
			numberShowM(value) {
				if (value == 'row') {
					this.numberTitle = '行'
				} else if (value == 'column') {
					this.numberTitle = '列'
				}
				this.numberShow = !this.numberShow;
			},
			numberClick(e) {
				// console.log('+++++' + JSON.stringify(e))
				if (this.numberTitle == '行') {
					this.form.locationLine = e[0].label
				} else if (this.numberTitle == '列') {
					this.form.locationColumn = e[0].label
				}
			},
			//弹出模态框
			open() {
				this.show = true;
			},
			//确认按钮
			compile() {
				uni.showLoading({
					title: "加载中",
				});

				let params = {
					price: this.form.price, //计费单价（元）
					dayMax: this.form.dayMax, //一天内计费封顶（元）
					locationColumn: this.form.locationColumn, //  木柜大小，列
					locationLine: this.form.locationLine, // 木柜大小，行
					remark: this.form.remark, //设备备注
					deviceLocation: this.form.place, //设备位置
					dayPartingHours: this.form.priceTimeLong, //分段分润商家收费时长（默认24小时）
					brokerageType: this.typeValueCode, //分润方式（标准分润：NORMAL；分段分润：DAYPARTING；递增计费：INCREMENTAL）
					freeTimeType: this.form.freeTime == '半小时' ? 'AGENT_TYPE' : 'SYSTEM_TYPE', //免费时长类型（系统免费时长：SYSTEM_TYPE；代理商免费时长：AGENT_TYPE）
					deviceMoneyCalType: this.form.priceType == '半小时' ? 'HALF_HOUR' : 'ONE_HOUR', //计费方式（半小时计费：HALF_HOUR；一小时计费：ONE_HOUR）
				};
				// console.log("++++++++++" + JSON.stringify(params))
				updatePrice(params, this.virtualSN.sn).then((res) => {
					// console.log("++++++++211111" + JSON.stringify(res))
					uni.hideLoading();
					if (res.data.statusCode == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 1000
						});
						var that = this;
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
							// uni.navigateTo({
							// 	url: "./management?virtual=" + encodeURIComponent(JSON.stringify(that.virtualSN))
							// });
						}, 1000);
					} else {
						uni.showToast({
							title: '修改失败，请稍后再试',
							icon: 'none',
							duration: 2000
						});
					}
				});
				// uni.navigateTo({
				// 	url: "../../../pages/item/virtualCode/management",
				// });
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}
	.page {
		background-color: #F3F5F7;
		height: 100%;
	}

	.picker {
		position: relative;

		.icon {
			position: absolute;
			top: 35%;
			right: 55%;
		}

		.Ticon {
			position: absolute;
			top: 35%;
			right: 17%;
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 10px;

		.form-content {
			background-color: #fff;
			border-radius: 10px;
			padding: 10px;
			flex: 1;
		}

		.button {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 999;
		}

		.item-height {
			position: relative;
			padding: 0.1rem 1rem;

			.arrow-down {
				position: absolute;
				left: 8.3rem;
			}
		}

	}
</style>
